<template>
  <div class="visit-appointment">
    <!-- <p>{{this.vid}}</p>
    <p>{{this.playid}}</p>
    <p>{{this.actDate}}</p> -->
    <!-- 团队预约 -->
    <div class="cb-step-wrap style2 xui-padding-top">
      <ul>
        <li>1.填写信息</li>
        <li>2.上传团队表格</li>
        <li>3.确认预约</li>
      </ul>
    </div>
    <!-- <p>{{actDate}}</p> -->
    <div class="cb-border-top-2 xui-margin-top-sm">
      <div class="form-wrap">
        <p class="xui-margin-bottom cb-border-bottom color-primary " style="padding:7px 0 7px 10px">1.填写信息</p>
        <el-form
          class="xui-fc xui-grid-box xui-padding-right"
          :model="td.visitorInfo"
          :rules="rules"
          ref="companyVisit"
          size="medium"
          label-width="150px">
          <div class="xui-grid-box">
            <el-form-item label="团队名称" prop="teamname" class="xui-grid-equal-6">
              <el-input v-model="td.visitorInfo.teamname" placeholder="请输入团队名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contactname" class="xui-grid-equal-6">
              <el-input v-model="td.visitorInfo.contactname" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
          </div>

          <div class="xui-grid-box">
            <el-form-item label="联系人证件类型" prop="cardtype" class="xui-grid-equal-6">
              <el-select v-model="td.visitorInfo.cardtype" placeholder="证件" class="select" style="width:100%;">
                <el-option label="身份证" value="身份证"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系人身份证号" prop="cardnum" class="xui-grid-equal-6">
              <el-input v-model="td.visitorInfo.cardnum" placeholder="请输入导游身份证号"></el-input>
            </el-form-item>
          </div>
          
          <div class="xui-grid-box">
            <el-form-item label="联系人手机号码" prop="phone" class="xui-grid-equal-6">
              <el-input v-model="td.visitorInfo.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="联系人备用号码" prop="sparephone" class="xui-grid-equal-6">
              <el-input v-model="td.visitorInfo.sparephone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
          </div>

          <div class="xui-grid-box">
            <el-form-item label="联系人与参与者关系" prop="relationship" class="xui-grid-equal-6">
              <el-select v-model="td.visitorInfo.relationship" placeholder="请输入关系" class="select" style="width:100%;">
                <el-option label="亲属" value="亲属"></el-option>
                <el-option label="家长" value="家长"></el-option>
                <el-option label="师生" value="师生"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系人电子邮箱" prop="email" class="xui-grid-equal-6">
              <el-input v-model="td.visitorInfo.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
          </div>
          
          <el-form-item label="备注" prop="remark" class="xui-grid-equal-12">
            <el-input v-model="td.visitorInfo.remark" placeholder="备注" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="form-wrap xui-margin-top">
        <p class="cb-border-bottom color-primary " style="padding:7px 0 7px 10px">2.上传团队表单</p>
        <div class="xui-padding" style="width:50%">
          <p>请下载团队表格模版，填写完整后上传</p>
          <div class="xui-margin-vertical">
            <a :href="downloadTmpUrl" class="color-blue" download="团队信息表格模版">下载团队表格模版</a>
          </div>
          <div class="xui-fc">
            <el-upload
              class="xui-fl"
              ref="upload"
              :action="uploadUrl"
              name="file"
              :data="td.visitorInfo"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :on-progress="formUploading"
              :on-change="fileChange"
              :on-remove="handleRemove"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              :file-list="fileList">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
            <el-button size="small" class="xui-fl xui-margin-left" style="margin-left:10px;" @click="clearFileList">清空列表</el-button>
          </div>
          
        </div>
      </div>
      <el-button type="primary" size="medium" class="submit-btn" @click="submitCompanyVisitor" :loading="loading">提
        交
      </el-button>
    </div>
  </div>
</template>

<script>
import contentHeader from "@/components/widge/content-header";
import tabBar from "@/components/widge/tabs/tab-bar";
import { getDetail } from "@/api/detail";
import { personalAppoint } from "@/api/appointment";
import { IdentityCodeValid } from "@/utils/validator";
import { getToken } from "@/utils/auth";
import { rootsUrl } from "@/utils";
import Qrcode from "@xkeshi/vue-qrcode";

export default {
  props: ["vid", "playid", "actDate"],
  components: {
    "content-header": contentHeader,
    tabBar,
    qrcode: Qrcode
  },
  data() {
    return {
      fileList: [],
      loading: false,
      td: {
        notice: "暂无需知",
        visitorInfo: {
          sourceId: "MHWZ",
          vid: this.vid,
          playid: this.playid,
          userid: "",
          token: "",
          lecturedate: this.actDate,
          teamname: "",
          contactname: "",
          cardtype: "身份证",
          cardnum: "",
          phone: "",
          sparephone: "",
          email: "",
          remark: "",
          relationship: ""
        },
        fileList: [],
        loading: false,
        dialogVisible: false
      },
      tdDialogVisible: false,
      pickerOption: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      rules: {
        teamname: [
          { required: true, message: "请输入团队名称", trigger: "blur" },
          { min: 2, message: "请输入正确的团队名称", trigger: "blur" }
        ],
        cardtype: [
          { required: true, message: "请选择联系人证件类型", trigger: "change" }
        ],
        visitDate: [
          {
            required: true,
            message: "请选择参观日期",
            trigger: "change"
          }
        ],
        contactname: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" }
        ],
        cardnum: [
          {
            required: true,
            message: "请输入证件号码",
            trigger: "blur"
          },
          {
            // validator: validateID,
            message: "请输入正确的身份证号码！",
            pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入联系人手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        email: [
          { type: "email", message: "请输入正确的邮件地址", trigger: "blur" }
        ],
        relationship: [
          {
            required: "true",
            message: "请选择联系人与参与者关系",
            trigger: "blur"
          }
        ]
      },
      fileList: []
    };
  },
  computed: {
    userId() {
      return this.$store.getters.userId;
    },
    token() {
      return getToken();
    },
    downloadTmpUrl() {
      return `${rootsUrl[1]}/cbeducate/lecture/downloadTeamTemplates.shtml`;
    },
    uploadUrl() {
      return `${rootsUrl[1]}/cbeducate/lecture/uploadTeamInfo.shtml`;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    }
  },
  methods: {
    clearFileList() {
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },
    submitCompanyVisitor() {
      if (!this.fileList.length) {
        this.$message.error("请选择文件");
        return false;
      }
      let form = this.$refs["companyVisit"];
      form.validate(valid => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: "申请失败，信息填写不正确",
            type: "error"
          });
          return false;
        } else {
          this.loading = true;
          this.td.visitorInfo.token = this.token;
          this.td.visitorInfo.userid = this.userId;
          this.$refs.upload.submit();
        }
      });
    },
    handleRemove(file, fileList) {
      this.fileList.splice(this.fileList.indexOf(file), 0);
    },
    uploadSuccess(response) {
      this.loading = false;
      if (response.flag == -1) {
        this.$alert(response.msg, "提交失败", {
          confirmButtonText: "确定"
        });
        this.loading = false;
        setTimeout(() => {
          this.$refs.upload.clearFiles();
          this.fileList = [];
        }, 500);
      } else if (response.flag == 1) {
        // 清空列表，方便下一次提交表格
        setTimeout(() => {
          this.$refs.upload.clearFiles();
          this.fileList = [];
        }, 500);
        this.$message({
          showClose: true,
          message: response.msg,
          type: "success"
        });
        this.tdDialogVisible = true;
        this.$emit("teamAppointed", response.msg);
      }
    },
    uploadError(err) {
      this.loading = false;
      this.$message({
        showClose: true,
        message: err,
        type: "error"
      });
    },
    formUploading() {
      this.loading = true;
    },
    fileChange(file, fileList) {
      this.fileList = [];
      this.fileList.push(file);
    },
    initUserInfo() {
      this.td.visitorInfo.contactname = this.userInfo.userName;
      this.td.visitorInfo.phone = this.userInfo.mobile;
      this.td.visitorInfo.email = this.userInfo.email;
      this.td.visitorInfo.vid = this.vid;
      this.td.visitorInfo.playid = this.playid;
      this.td.visitorInfo.lecturedate = this.actDate;
      if (this.userInfo.codeType == "身份证") {
        this.td.visitorInfo.cardnum = this.userInfo.code;
      } else if (this.userInfo.codeType == "身份证") {
        this.td.visitorInfo.cardnum = "";
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initUserInfo();
    });
  },
  watch: {
    vid: function() {
      this.td.visitorInfo.vid = this.vid;
    },
    playid: function() {
      this.td.visitorInfo.playid = this.playid;
    },
    actDate: function() {
      this.td.visitorInfo.lecturedate = this.actDate;
    }
  }
};
</script>

<style lang="less">
.cardType .el-input--suffix .el-input__inner {
  padding-right: 15px;
}

.visit-appointment {
  .tab-box {
    width: 320px;
    margin: 20px auto;
  }
  .form-wrap {
    background: #fcf6ea;
    margin-bottom: 10px;
    position: relative;
  }
  .people-form {
    .delete-people-btn {
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }
}

.width-100.el-date-editor.el-input {
  width: 100%;
}

.save-qr-btn {
  border: 1px solid #ddd;
  padding: 5px 28px;
  background: #f5f5f5;
  border-radius: 4px;
  margin: 5px 0;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s;
}

.save-qr-btn:hover {
  background-color: #e9e9e9;
  color: #000;
}
</style>


